<template>
  <div class="app-container">
    <el-card style="height: 380px;background-color: #fde2e2;text-align: center;">
      <h1 class="textTop">可视化报表</h1>
      <el-row>
        <el-col :span="11">
          <el-card
            style="height: 280px;background-color:#89d3ff;cursor: pointer;display: flex; justify-content: center; align-items: center; ">
            <!--            <h1 class="textCenter" @click="openWJDC">问卷调查</h1>-->
            <!--            维修处理占比环形图-->
            <div id="wxcl_echarts" ref="wxcl_echarts" class="echartsCon">
            </div>
          </el-card>
        </el-col>
        <el-col :span="2" style="opacity: 0">
          <div style="display: inline-block"></div>
        </el-col>
        <el-col :span="11">
          <el-card
            style="height: 280px;background-color:#89d3ff;cursor: pointer;display: flex; justify-content: center; align-items: center;">
            <!--            <h1 class="textCenter">问卷管理</h1>-->
            <!--            配件库存显示柱状图-->
            <div id="pjkc_echarts" ref="pjkc_echarts" class="echartsCon">
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
    <hr>
    <el-card style="height: 380px;background-color: #89d3ff ;text-align: center;">
      <h1 class="textTop">精准预测</h1>
      <el-row>
        <el-col :span="11">
          <el-card
            style="height: 280px;background-color:#fde2e2 ;cursor: pointer;display: flex; justify-content: center; align-items: center;">
            <el-select v-model="dataYear" placeholder="请选择" style="width: 100px" @change="queryYYSL(dataYear)">
              <el-option
                v-for="item in dataYearOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <!--            <h1 class="textCenter">投诉登记</h1>-->
            <!--            用户随时间的预约数量-->
            <div id="yysl_echarts" ref="yysl_echarts" class="echartsCon"></div>
          </el-card>
        </el-col>
        <el-col :span="2" style="opacity: 0">
          <div style="display: inline-block"></div>
        </el-col>
        <el-col :span="11">
          <el-card
            style="height: 280px;background-color:#fde2e2;cursor: pointer;display: flex; justify-content: center; align-items: center;">
            <!--            <h1 class="textCenter">投诉管理</h1>-->
            <!--地球-->
            <!--            <div id="eee_echarts" ref="eee_echarts" class="echartsCon"></div>-->
            <div id="oneEarth" ref="oneEarth" class="echartsCon"></div>
          </el-card>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import {
  option_pjsl,
  option_wxgl,
  option_yysl,
  queryDataForEcharts_DANZI,
  queryDataForEcharts_PJSL,
  queryDataForEcharts_WXCLZB,
  queryDataForEcharts_YYSL
} from "@/views/4s_shop/shujufenxi/shujuEcharts";
import * as echarts from 'echarts' // echarts5.0  引入方式
import 'echarts-gl';

export default {
  name: "index",
  data() {
    return {
      dataYear: '2025',
      dataYearOptions: []
    }
  },
  // DOM渲染前
  mounted() {
    this.gerDataYear()
    this.queryNeedData()
  },
  created() {
    // this.show_wfzb_echarts()
    // this.queryNeedData()
  },
  methods: {
    openWJDC() {
    },
    openWJGL() {
    },
    openTSDJ() {
    },
    openTSGL() {
    },
    //维修数量
    show_wxcl_echarts(data) {
      // var chartDom = document.getElementById('wxcl_echarts');  // 此方法需要DOM加载完
      var chartDom = this.$refs.wxcl_echarts   //用这种方法获取DOM
      // console.log("Dom",chartDom)
      var myChart_wxgl = echarts.init(chartDom);
      var nameChange = {
        "0": "待处理",
        "1": "进行中",
        "2": "已完成",
        "3": "已取消",
      }
      var dataList = []
      dataList = data
      for (let i = 0; i < dataList.length; i++) {
        data[i].name = nameChange[data[i].name]
      }
      option_wxgl.series[0].data = data
      option_wxgl && myChart_wxgl.setOption(option_wxgl);
    },
    //配件数量
    show_pjsl_echarts(data) {
      // var chartDom = document.getElementById('wxcl_echarts');  // 此方法需要DOM加载完
      var chartDom = this.$refs.pjkc_echarts   //用这种方法获取DOM
      // console.log("Dom",chartDom)
      var myChart_wxgl = echarts.init(chartDom);


      var pjsl_data = data
      var x_data = []
      pjsl_data.forEach((item) => {
        x_data.push(item.name)
      })
      var y1_data = []
      var y2_data = []
      var y3_data = []
      pjsl_data.forEach((item) => {
        y1_data.push(item.iVal)
        y2_data.push(item.oVal)
        y3_data.push(item.allVal)
      })

      option_pjsl.xAxis[0].data = x_data
      option_pjsl.series[0].data = y1_data
      option_pjsl.series[1].data = y2_data
      option_pjsl.series[2].data = y3_data
      option_pjsl && myChart_wxgl.setOption(option_pjsl);
    },
    //用户随时间的预约数量
    show_yysl_echarts(data) {
      var chartDom = this.$refs.yysl_echarts
      var myChart_pjsl = echarts.init(chartDom);
      var wxcl_data = data
      var x_data = []
      wxcl_data.forEach((item) => {
        x_data.push(item.dateNum)
      })
      var y_data = []
      wxcl_data.forEach((item) => {
        y_data.push(item.value)
      })
      option_yysl.xAxis.data = x_data
      option_yysl.series[0].data = y_data
      option_yysl && myChart_pjsl.setOption(option_yysl);
    },
    //服务占比
    show_wfzb_echarts(data) {
      // var ROOT_PATH = 'https://echarts.apache.org/examples';

      var yuyueNum = data.yuyueNum
      var gongzuoNum = data.gongzuoNum
      var weixiuNum = data.weixiuNum
      var baoyangNum = data.baoyangNum
      var totlaNum = parseInt(yuyueNum) + parseInt(gongzuoNum) + parseInt(weixiuNum)+ parseInt(baoyangNum)
      yuyueNum = (parseInt(yuyueNum) / totlaNum).toFixed(2).split(".")[1]
      gongzuoNum = (parseInt(gongzuoNum) / totlaNum).toFixed(2).split(".")[1]
      weixiuNum = (parseInt(weixiuNum) / totlaNum).toFixed(2).split(".")[1]
      baoyangNum = (parseInt(baoyangNum) / totlaNum).toFixed(2).split(".")[1]
      const gaugeData = [
        {
          value: yuyueNum,
          name: ' 预约单',
          title: {
            offsetCenter: ['0%', '-55%']
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '-40%']
          }
        },
        {
          value: gongzuoNum,
          name: '工作单',
          title: {
            offsetCenter: ['0%', '-20%']
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '-5%']
          }
        },
        {
          value: weixiuNum,
          name: '维修单',
          title: {
            offsetCenter: ['0%', '15%']
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '30%']
          }
        },
        {
          value: baoyangNum,
          name: '保养单',
          title: {
            offsetCenter: ['0%', '50%']
          },
          detail: {
            valueAnimation: true,
            offsetCenter: ['0%', '65%']
          }
        }
      ];
      // var chartDom = document.getElementById('main');
      var chartDom = this.$refs.oneEarth
      var myChart = echarts.init(chartDom);
      var option_earth;

      /*option_earth = {*/
      //   backgroundColor: '#230101',
      //   title: {
      //     text: '3D地图',
      //     left: 'center'
      //   },
      //   //我他妈真服了，别人都显示，你也不报错，也不显示？？？？？？？？？？？？？
      //   /*globe: {
      //     baseTexture: 'earthFile/world.topo.bathy.200401.jpg',
      //     heightTexture: 'earthFile/world.topo.bathy.200401.jpg',
      //     displacementScale: 0.04,
      //     shading: 'realistic',
      //     environment:'earthFile/starfield.jpg',
      //     realisticMaterial: {
      //       roughness: 0.9
      //     },
      //     postEffect: {
      //       enable: true
      //     },
      //     light: {
      //       main: {
      //         intensity: 5,
      //         shadow: true
      //       },
      //       ambientCubemap: {
      //         texture:'earthFile/pisa.hdr',
      //         diffuseIntensity: 0.2
      //       }
      //     }
      //   }*/
      //
      // };
      option_earth = {
        title: {
          text: '服务占比',
          left: 'center'
        },
        series: [
          {
            type: 'gauge',
            startAngle: 90,
            endAngle: -270,
            pointer: {
              show: false
            },
            progress: {
              show: true,
              overlap: false,
              roundCap: true,
              clip: false,
              itemStyle: {
                borderWidth: 1,
                borderColor: '#464646'
              }
            },
            axisLine: {
              lineStyle: {
                width: 35    // 环形线宽度
              }
            },
            splitLine: {
              show: false,
              distance: 0,
              length: 10
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false,
              distance: 50
            },
            data: gaugeData,
            title: {
              fontSize: 10,
              padding: [0, 0, 0, 0]
            },
            // 中间内容配置
            detail: {
              width: 50,
              height: 8,
              fontSize: 10,
              color: 'inherit',
              borderColor: 'inherit',
              borderRadius: 20,
              borderWidth: 1,
              formatter: '{value}%'
            }
          }
        ]
      };
      option_earth && myChart.setOption(option_earth);
    },

    //生成年份下拉框数据
    gerDataYear() {
      for (let i = 2000; i <= 2025; i++) {
        var obj = {
          value: i.toString(),
          label: i + "年"
        }
        this.dataYearOptions.push(obj)
      }
    },

    //查询所需数据
    queryNeedData() {
      queryDataForEcharts_WXCLZB().then((res) => {
        // console.log('维修',res)
        this.show_wxcl_echarts(res)
      })
      queryDataForEcharts_PJSL().then((res) => {
        // console.log('配件',res)
        this.show_pjsl_echarts(res)
      })
      queryDataForEcharts_YYSL(this.dataYear).then((res) => {
        // console.log('预约', res)
        this.show_yysl_echarts(res)
      })
      queryDataForEcharts_DANZI().then((res) => {
        // console.log('单子',res)
        this.show_wfzb_echarts(res)
      })
    },
    //下拉框重新查询预约数量
    queryYYSL(dataYear) {
      queryDataForEcharts_YYSL(dataYear).then((res) => {
        // console.log('预约', res)
        this.show_yysl_echarts(res)
      })
    }

  }
}
</script>

<style scoped>
.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 200px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}

.textCenter {
  font-size: 60px;
  color: #fff;
  text-shadow: 0 0 5px #10f701, 0 0 10px #727272;
}

.textTop {
  font-size: 25px;
  color: #251d1d;
  text-shadow: 0 0 5px #10f701, 0 0 10px #727272;
}

.echartsCon {
  height: 260px;
  width: 500px;
}
</style>
